<template>
	<view class="container" style="display: grid;">
		<scroll-view scroll-y="true" style="height: 649px;" @scroll="onScroll" lower-threshold="2000"
			@scrolltolower="buttomNav()" upper-threshold="800px" @scrolltoupper="topNav()"
			:scroll-into-view="'scroll-item-'+clickedNavIndex">
			<view
				style="position: fixed;width: 100%;height: 50px;z-index: 9999;background-color: white;transition: opacity 0.3s;"
				:style="{ opacity: headerOpacity }">
				<image @click="goBack" src="../../../static/下载.png"
					style="width: 25px;height: 25px;margin-top: 12px;margin-left: 8px;float: left;" mode=""></image>
				<span v-for="(item, index) in titleList" :key="item.id" @click="handleItemClick(item, index)"
					:class="['title-item', { 'title-item-no-fig': item.fig }, {active: index === viewNavIndex}]">
					{{ item.title }}
				</span>
			</view>
			<view>
				<swiper class="swiper" duration="1000" @change="changeswiper" :current="currentswiper">
					<swiper-item v-for="(item,index) in goodsImageList" :key="index" id="scroll-item-0">
						<view>
							<image class="swiper-image" :src="item.productDetailsUrl" mode="heightFix"></image>
						</view>
					</swiper-item>
				</swiper>
				<view>
					<input disabled type="text" :value="'  '+ (currentswiper+1) + '/' + goodsImageList.length"
						style="z-index: 9999;width: 40px;
					border-radius: 15px 0px 0px 15px;background-color: darkgray;opacity: 0.6;color: white;float: right;margin-top: -40px;" />
				</view>
			</view>
			<view
				style="width: 100%;height: 250px;background-color: white;border-radius: 0px 0px 15px 15px;display: flow-root;">
				<view style="margin: 10px;">
					<span style="color: orangered;">
						<span style="font-size: 12px;">到手价</span>
						<span style="font-weight: 600;">{{classificationPojo.listGoodsSymbol}}</span>
						<span style="font-size: 36px;font-weight: bold;">{{classificationPojo.listGoodsPrice}}</span>
						<span>.{{classificationPojo.listGoodsDecimal}}</span>
					</span>
				</view>
				<view style="margin: 10px;">
					<image src="../../../static/dc3f7acfff4a1ee7.png" style="width: 15px;height: 15px;"
						mode="heightFix">
					</image>
					<span style="font-size: 18px;font-weight: bold;">{{classificationPojo.listGoodsTitle}}</span>
				</view>
				<view
					style="margin: 10px;width: 345px;height: 25px;background-color: #ffe5e4;display: flex;border-radius: 15px;">
					<image src="../../../static/b73a0d4e3f653a22.png" style="width: 64.88px;height: 25px;" mode="">
					</image>
					<span style="font-size: 12px;padding: 0px 4px;margin-top: 4px;width: 255px;">聚酯纤维材质抱枕热卖榜第5名</span>
					<image src="../../../static/下载 (2).png"
						style="width: 12px;height: 12px;margin-top: 6px;margin-right: 7px;" mode=""></image>
				</view>
				<view style="display: flex;margin-top: 20px;margin-left: 10px;">
					<view>
						<input type="button" placeholder="分享" disabled style="
						background-image: url('https://img11.360buyimg.com/img/jfs/t1/185923/19/38125/325/64fad71dFeef526f9/f11f072077880807.png');
						background-repeat: no-repeat;background-size: 20px;text-align: right;font-size: 14px;background-position: 3px 2px;
						width: 55px;margin-left: 30px;
						" />
					</view>
					<view>
						<input type="button" placeholder="收藏" disabled style="
						background-image: url('https://img10.360buyimg.com/img/jfs/t1/102190/6/45012/397/64fad71dF756823e2/d39f976bcb0a7e1f.png');
						background-repeat: no-repeat;background-size: 20px;text-align: right;font-size: 14px;background-position: 3px 2px;
						width: 55px;margin-left: 50px;
						" />
					</view>
					<view>
						<input type="button" placeholder="降价通知" disabled style="
						background-image: url('https://img11.360buyimg.com/img/jfs/t1/143406/40/38936/332/64fad71dF85fe799a/be862fbe6f0efb0d.png');
						background-repeat: no-repeat;background-size: 20px;text-align: right;font-size: 14px;background-position: 3px 2px;
						width: 80px;margin-left: 50px;
						" />
					</view>
				</view>
			</view>
			<view style="border-radius: 15px;width: 375.33px;height: 80px;background-color: white;margin-top: 20px;">
				<span style="font-weight: bold;margin-top: 20px;margin-left: 20px;float: left;">优惠</span>
				<view>
					<input type="text" disabled style="
					background-image: url('../../../static/优惠劵.png');
					background-repeat: no-repeat;
					background-size: 115px 22px;
					margin-top: 20px;
					margin-left: 10px;
					float: left;
					width: 115px;
					color: red;
					text-align: center;
					font-size: 12px;
					" value="跨店每满300减50" />
					<input type="text" disabled style="
					background-image: url('../../../static/优惠劵.png');
					background-repeat: no-repeat;
					background-size: 75px 22px;
					margin-top: 20px;
					margin-left: 10px;
					float: left;
					width: 75px;
					color: red;
					font-size: 12px;
					text-align: center;
					" value="满200减20" />
				</view>
				<view>
					<button class="button" type="primary" @click="toggle('bottom')"
						style="background-image: url('../../../static/三点.png');
					width: 30px;height: 10px;float: left;background-repeat: no-repeat;background-size: 30px;margin-top: 20px;margin-left: 65px;">
					</button>
				</view>
				<view>
					<image src="../../../static/满减.png"
						style="width: 43.75px;height: 20px;float: left;margin-top: 50px;margin-left: -295px;"
						mode="heightFix"></image>
					<span
						style="float: left;margin-top: 10px;margin-left: 110px;color: darkgray;font-size: 12px;">每满18元，可减4元现金</span>
				</view>
			</view>
			<view style="background-color: white;border-radius: 15px 15px 0px 0px;">
				<view
					style="border-radius: 15px;width: 375.33px;height: 80px;background-color: white;margin-top: 20px;">
					<span style="font-weight: bold;margin-top: 20px;margin-left: 20px;float: left;">已选</span>
					<view style="float: left;margin-top: 19px;margin-left: 10px;">
						<span>{{classificationPojo.commodityVariety}},{{numberValue}}个</span><br />
						<span style="font-size: 12px;color: darkgrey;">本商品支持京东保障服务，点击可选服务</span>
					</view>
				</view>
				<view>
					<button class="button" type="primary" @click="selected('bottom',false)"
						style="background-image: url('../../../static/三点.png');
					width: 30px;height: 10px;float: right;background-repeat: no-repeat;background-size: 30px;margin-top: -60px;margin-right: 17px;">
					</button>
				</view>
				<view style="border: 0.5px solid aliceblue;width: 85%;margin-left: 30px;"></view>
				<view style="border-radius: 15px;width: 375.33px;height: 80px;background-color: white;">
					<span style="font-weight: bold;margin-top: 20px;margin-left: 20px;float: left;">送至</span>
					<view style="float: left;margin-top: 19px;margin-left: 10px;">
						<span>北京朝阳区三环到四环之间</span><br />
						<image src="../../../static/f0af8ad84c0601bc.png"
							style="width: 70px;height: 15px;margin-top: 5px;float: left;" mode=""></image>
						<span style="font-size: 12px;color: darkgrey;"><span
								style="color: red;margin-left: 5px;margin-right: 5px;">现货</span>23:10前下单，预计，<br /><span>明天(08月31日)送达</span></span>
					</view>
				</view>
				<view>
					<button class="button" type="primary" @click="toggle('bottom')"
						style="background-image: url('../../../static/三点.png');
					width: 30px;height: 10px;float: right;background-repeat: no-repeat;background-size: 30px;margin-top: -60px;margin-right: 17px;">
					</button>

				</view>
			</view>
			<view style="border-radius: 15px;width: 375.33px;height: 80px;float: left;">
				<view>
					<image src="../../../static/对号.png" style="width: 16px; height: 16px;margin: 10px;float: left;"
						mode=""></image>
					<span style="float: left;
						margin-top: 10px;
						font-size: 12px;
						color: darkgray;
						width: 310px;
						">59元免基础运费</span>
				</view>
				<view>
					<button class="button" type="primary" @click="toggle('bottom')"
						style="background-image: url('../../../static/三点.png');
					width: 30px;height: 10px;float: right;background-repeat: no-repeat;background-size: 30px;margin-top: -10px;margin-right: 17px;background-color: #f6f6f6 !important;">
					</button>
				</view>
				<view style="float: left;margin-left: -37px;">
					<image src="../../../static/对号.png" style="width: 16px; height: 16px;margin: 10px;float: left;"
						mode=""></image>
					<span style="float: left;margin-top: 10px;font-size: 12px;color: darkgray;">
						30天无理由退货（使用后不支持）
					</span>
				</view>
				<view>
					<image src="../../../static/对号.png" style="width: 16px; height: 16px;margin: 10px;float: left;"
						mode=""></image>
					<span style="float: left;
						margin-top: 10px;
						font-size: 12px;
						color: darkgray;
						width: 100px;
						">免费上门退换</span>
				</view>
				<view style="    float: left; margin-left: -354px;margin-top: 25px;">
					<image src="../../../static/对号.png" style="width: 16px; height: 16px;margin: 10px;float: left;"
						mode=""></image>
					<span style="float: left;
						margin-top: 10px;
						font-size: 12px;
						color: darkgray;
						">7天价保</span>
				</view>
				<view style="    float: left;margin-left: -270px;margin-top: 25px;">
					<image src="../../../static/对号.png" style="width: 16px; height: 16px;margin: 10px;float: left;"
						mode=""></image>
					<span style="float: left;
						margin-top: 10px;
						font-size: 12px;
						color: darkgray;
						">上门换新</span>
				</view>
				<view style="float: left;margin-left: -180px; margin-top: 25px;">
					<image src="../../../static/对号.png" style="width: 16px; height: 16px;margin: 10px;float: left;"
						mode=""></image>
					<span style="float: left;
						margin-top: 10px;
						font-size: 12px;
						color: darkgray;
						">闪电退款</span>
				</view>
			</view>
			<view>
				<swiper v-for="(item,index) in goodsImageList" :key="index" id="scroll-item-2" class="swiper"
					duration="1000">
					<swiper-item style="margin-top: 10px;">
						<view>
							<image class="swiper-image" :src="item.productDetailsUrl" mode="heightFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="goods-carts">
				<uni-goods-nav :options="options" type="primary" :fill="true" :button-group="buttonGroup"
					@click="onClick" @buttonClick="buttonClick" />
			</view>
		</scroll-view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" style="border-radius: 15px; !important">
				<view class="popup-content">
					<view style="text-align: center;margin-top: 10px;">
						<span style="font-weight: bold;">优惠</span>
					</view>
					<view style="margin-left: 10px;">
						<span style="font-weight: bold;">促销</span>
					</view>
					<view style="margin: 20px;">
						<input type="text" value="跨店满减" disabled
							style="font-size: 12px;border: 1px solid;color: red;width: 50px;" />
						<span style="display: flex;font-size: 12px;">
							每满300减50 | 距结束还剩
							<uni-countdown :day="12" :hour="14" :minute="50" :second="45" />
						</span>
						<span style="font-size: 12px;">最多可减40000元</span>
					</view>
					<view style="margin: 20px;">
						<input type="text" value="满减" disabled
							style="font-size: 12px;border: 1px solid;color: red;width: 25px;">
						<span>每满28元，可减4元现金</span>
						<image src="../../../static/下载 (2).png" style="width: 20px;height: 20px;float: right;" mode="">
						</image>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="selected" background-color="#fff">
				<view class="popup-content">
					<view style="float: left;">
						<view style="float: left;">
							<image :src="classificationPojo.listGoodsImageUrl"
								style="width: 120px;height: 120px;border-radius: 15px;margin: 15px;" mode=""></image>
						</view>
						<view style="margin-top: 60px;float: left;">
							<span style="color: orangered;">
								<span style="font-size: 12px;">到手价</span>
								<span style="font-weight: 600;">{{classificationPojo.listGoodsSymbol}}</span>
								<span
									style="font-size: 36px;font-weight: bold;">{{classificationPojo.listGoodsPrice}}</span>
								<span>.{{classificationPojo.listGoodsDecimal}}</span>
							</span>
						</view>
						<view style="float: left;">
							<span
								style="color: gainsboro;font-size: 12px;float: left;margin-top: 4px;margin-right: 10px;">已选</span>
							<input style="font-size: 12px;width: 170px;float: left;" disabled
								:value="classificationPojo.commodityVariety+',' + numberValue + '个'" />
						</view>
					</view>
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" style="height: 180px;">
						<view style="margin: 15px;">
							<span style="font-weight: bold;">{{classificationPojo.commodityCategory}}</span>
							<view>
								<view style="display: flex;flex-wrap: wrap;" v-for="(item,index) in classificationList"
									:key="item.commodityQuantity">
									<view :class="{'sku_choose':skuChoose==item.commodityQuantity}"
										@click="selectedSku(item.commodityQuantity)"
										style="text-align: center;border-radius: 15px;margin: 5px;padding: 0px 18px;background-color: #f2f2f2;line-height: 30px;height: 30px;">
										{{item.commodityVariety}}
									</view>
								</view>

							</view>
							<view style="float: left;">
								<span>数量</span>
							</view>
							<view style="float: right;">
								<uni-number-box :value="numberValue" v-model="numberValue" :min="1"></uni-number-box>
							</view>
						</view>
					</scroll-view>
					<view class="goods-carts" v-if="shopping==true">
						<uni-goods-nav options="" :fill="true" :button-group="buttonGroup" @click="onClick"
							@buttonClick="goodsCarts" />
					</view>
					<view class="sopping-carts" v-if="shopping==false">
						<button @click="shopClick"
							style="background-color: #f2270c !important;width: 90%;border-radius: 25px !important;height: 38px;margin-top: 5px;line-height: 38px;">确定</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import { userId } from '../../../apiRequest/news';
import {
		classifi,
		listOfGoods,
		shopCount
	} from '../../../apiRequest/order';
	export default {
		data() {
			return {
				options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 0
				}],
				shopping: false,
				numberValue: 1,
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				skuChoose: 0,
				goodsImageList: [],
				classificationList: [],
				classificationPojo: {},
				currentswiper: 0,
				checkList: false,
				contentText: {
					contentDefault: '收藏',
					contentFav: '已收藏'
				},
				titleList: [{
						title: "商品",
						fig: true,
						id: 'order'
					},
					{
						title: "评价",
						fig: false,
						id: 'evaluate'
					},
					{
						title: "详情",
						fig: false,
						id: 'details'
					},
					{
						title: "推荐",
						fig: false,
						id: 'recommend'
					}
				],
				headerOpacity: 0,
				type: 'center',
				isTouchScrollView: false,
				clickedNavIndex: -1,
				viewNavIndex: 0,
				flag: true,
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			if(this.$isLogin == true){
				this.classification(option.id);
				this.selectedSku(option.id);
				this.selectGoodsShop();
			}else{
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
			
		},
		methods: {
			selectGoodsShop() {
				shopCount().then(shopCount => {
					this.options[2].info = shopCount.numCount;
				})
			},
			selectedSku(commodityQuantity) {
				uni.setStorageSync('goodsId', commodityQuantity);
				uni.setStorageSync('typeId', commodityQuantity);
				this.skuChoose = commodityQuantity;
				this.classification(commodityQuantity);
			},
			classification(id) {
				classifi(id).then(classifi => {
					this.classificationPojo = classifi.classificationPojo;
					this.classificationList = classifi.classificationList;
					this.goodsImageList = classifi.product;
				})
			},
			onClick(e) {
				uni.showToast({
					title: '正在跳转',
					icon: 'none',
					duration: 2000
				})
				setTimeout(function() {
					if (e.content.text == '购物车') {
						uni.switchTab({
							url: '/pages/newsList/newsList'
						})
					}
				}, 2000)
			},
			goBack() {
				// 使用uni.navigateBack()方法返回上一个页面  
				// delta参数表示要返回的页面数，默认为1  
				uni.navigateBack({
					delta: 1
				});
			},
			buttonClick(e) {
				if (e.content.text == '加入购物车') {
					this.selected('bottom', true);
				}
				if (e.content.text == '立即购买') {
					this.selected('bottom', true);
				}

			},
			goodsCarts(e) {
				if (e.content.text == '加入购物车') {
					this.shopClick();
				}
				if (e.content.text == '立即购买') {
					this.shopClick();
				}
			},
			shopClick() {
				var thia = this;
				var priceCount = 0.00;
				var num = this.classificationPojo.listGoodsPrice + '.' + this.classificationPojo.listGoodsDecimal;
				var numValue = parseInt(this.numberValue);
				var priceNum = parseFloat(num);
				if (!isNaN(priceNum)) {
					priceCount = priceNum * numValue;
				}
				uni.setStorageSync('shopCount', priceCount);
				userId().then(usrId=>{
					uni.request({
						url: 'uni-app/shopping-carts/insert',
						data: {
							"usrId": usrId,
							"goodsId": uni.getStorageSync("goodsId"),
							"keeperId": uni.getStorageSync("keeperId"),
							"typeId": uni.getStorageSync("typeId"),
							"shopNumber": numValue,
							"shopCount": uni.getStorageSync("shopCount"),
							"shopFig": 'true'
						},
						success(res) {
							if (res.data) {
								uni.showToast({
									title: '加入成功',
									duration: 2000
								})
								thia.selectGoodsShop(usrId);
							} else {
								uni.showToast({
									title: '加入失败',
									duration: 2000
								})
							}
						},
						fail: (err) => {
							console.log(err);
						}
					})
				})
				this.$refs.selected.close()
			},
			changeswiper(e) { // 得加上这个方法！！！
				this.currentswiper = e.detail.current
			},
			favClick() {
				this.checkList = !this.checkList
				this.$forceUpdate()
			},
			handleItemClick(item, index) {
				if (!this.isTouchScrollView && this.clickedNavIndex == index) return;
				// 锁定联动
				this.isTouchScrollView = false;
				// 解决clickedNavIndex相同触发更新失败
				if (this.clickedNavIndex == index) {
					this.clickedNavIndex = -1;
				}
				this.$nextTick(function() {
					this.clickedNavIndex = index;
					this.viewNavIndex = index;
				})
				if (this.titleList[index].fig == false) {
					this.titleList = [{
							title: "商品",
							fig: false,
							id: 'order'
						},
						{
							title: "评价",
							fig: false,
							id: 'evaluate'
						},
						{
							title: "详情",
							fig: false,
							id: 'details'
						},
						{
							title: "推荐",
							fig: false,
							id: 'recommend'
						}
					];
					this.titleList[index] = {
						title: item.title,
						fig: !item.fig,
					};
					this.$forceUpdate()
				}


			},
			onScroll(e) {
				this.headerOpacity = e.detail.scrollTop / 200;
			},
			buttomNav() {
				this.titleList = [{
						title: "商品",
						fig: false,
						id: 'order'
					},
					{
						title: "评价",
						fig: false,
						id: 'evaluate'
					},
					{
						title: "详情",
						fig: true,
						id: 'details'
					},
					{
						title: "推荐",
						fig: false,
						id: 'recommend'
					}
				];
			},
			topNav() {
				this.titleList = [{
						title: "商品",
						fig: true,
						id: 'order'
					},
					{
						title: "评价",
						fig: false,
						id: 'evaluate'
					},
					{
						title: "详情",
						fig: false,
						id: 'details'
					},
					{
						title: "推荐",
						fig: false,
						id: 'recommend'
					}
				];
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			selected(type, shop) {
				this.shopping = !shop;
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.selected.open(type)
			},
		}
	}
</script>

<style>
	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0px;
		height: 75px;
		background-color: white;
	}

	.sopping-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0px;
		height: 75px;
		background-color: white;
	}

	.swiper {
		height: 375px;
		width: 100%;
	}

	.swiper-image {
		width: 100% !important;
		height: 375px;
	}

	.title-item {
		margin-left: 30px;
		float: left;
		margin-top: 10px;
		line-height: 30px;
	}

	.title-item-no-fig {
		background-size: 40px 3px;
		background-image: linear-gradient(90deg, #f5503a, #fad1cb);
		background-repeat: no-repeat;
		background-position-y: bottom;
	}

	button {
		border-radius: 0px !important;
		background-color: white !important;
	}

	button::after {
		border: 0px !important;
	}

	.popup-content {
		width: 100%;
		height: 375.33px;
	}

	.vue-ref {
		border-radius: 15px !important;
	}

	.sku_choose {
		background: #fcedeb !important;
		border: 1px solid #f2270c;
		color: #f2270c;
	}
</style>